import React, { Component } from 'react'
import classnames from 'classnames'
import '../index.css'

export default class Comment extends Component {
  state = {
    // 当前用户
    user: {
      name: '清风徐来',
      vip: true,
      avatar: 'https://static.youku.com/lvip/img/avatar/310/6.png',
    },
    // 评论列表
    comments: [
      {
        id: 100,
        name: '__RichMan',
        avatar: 'https://r1.ykimg.com/051000005BB36AF28B6EE4050F0E3BA6',
        content:
          '这阵容我喜欢😍靳东&闫妮，就这俩名字，我就知道是良心剧集...锁了🔒',
        time: '2021/10/12 10:10:23',
        vip: true,
        collect: false,
      },
      {
        id: 101,
        name: '糖蜜甜筒颖',
        avatar:
          'https://image.9xsecndns.cn/image/uicon/712b2bbec5b58d6066aff202c9402abc3370674052733b.jpg',
        content:
          '突围神仙阵容 人民的名义第三部来了 靳东陈晓闫妮秦岚等众多优秀演员实力派 守护人民的财产 再现国家企业发展历程',
        time: '2021/09/23 15:12:44',
        vip: false,
        collect: true,
      },
      {
        id: 102,
        name: '清风徐来',
        avatar: 'https://static.youku.com/lvip/img/avatar/310/6.png',
        content:
          '第一集看的有点费力，投入不了，闫妮不太适合啊，职场的人哪有那么多表情，一点职场的感觉都没有',
        time: '2021/07/01 00:30:51',
        vip: true,
        collect: false,
      },
    ],
    // 输入框的值
    value: '',
  }

  // 监听文本框发生变化
  onChange = (e) => {
    /* this.setState({ value: e.target.value })
    const { value } = e.target
    if (value.length > 100) {
      return alert('多了')
    } */

    // this.setState({ value: e.target.value })
    const { value } = e.target
    if (value.length <= 100) {
      this.setState({ value })
    }
  }

  // 点击发表评论
  onPost = () => {
    const commentItem = {
      // name: this.state.user.name,
      // avatar: this.state.user.avatar,
      // vip: this.state.user.vip,
      id: Math.random(),
      content: this.state.value,
      time: new Date().toLocaleString(),
      collect: false,
      ...this.state.user,
    }
    // console.log(commentItem)
    const newComments = [...this.state.comments, commentItem]
    this.setState({ comments: newComments, value: '' })
  }

  // 点击删除评论
  onDel = (id) => {
    console.log('点击删除评论', id)
    /* // 方法一
    const arr = [...this.state.comments]
    const index = arr.findIndex((c) => c.id === id)
    arr.splice(index, 1)
    this.setState({ comments: arr }) */
    // 方法二
    this.setState({
      comments: this.state.comments.filter((item) => item.id !== id),
    })
  }

  // 点击收藏评论
  onCollect = (id) => {
    const arr = this.state.comments.map((item) => {
      if (item.id === id) {
        return { ...item, collect: !item.collect }
      } else {
        return item
      }
    })
    this.setState({ comments: arr })
  }

  render() {
    const { comments, user, value } = this.state
    return (
      <div className="comments">
        <h3 className="comm-head">评论</h3>
        <div className="comm-input">
          <textarea
            value={value}
            onChange={this.onChange}
            placeholder="爱发评论的人，运气都很棒"
          ></textarea>
          <div className="foot">
            <div className="word">{value.length}/100</div>
            <div className="btn" onClick={this.onPost}>
              发表评论
            </div>
          </div>
        </div>
        <h3 className="comm-head">
          热门评论<sub>({comments.length})</sub>
        </h3>
        <ul className="comm-list">
          {comments.map((item) => {
            return (
              <li key={item.id} className="comm-item">
                <div
                  className="avatar"
                  style={{ backgroundImage: `url(${item.avatar})` }}
                ></div>
                <div className="info">
                  <p className={classnames('name', { vip: item.vip })}>
                    {item.name}
                    {item.vip ? (
                      <img src="https://gw.alicdn.com/tfs/TB1c5JFbGSs3KVjSZPiXXcsiVXa-48-48.png" />
                    ) : null}
                  </p>
                  <p className="time">
                    {item.time} {''}
                    <span
                      className={classnames('iconfont', {
                        'icon-collect': !item.collect,
                        'icon-collect-sel': item.collect,
                      })}
                      onClick={() => {
                        this.onCollect(item.id)
                      }}
                    ></span>
                    <span
                      className="del"
                      onClick={() => {
                        this.onDel(item.id)
                      }}
                    >
                      删除
                    </span>
                  </p>
                  <p>{item.content}</p>
                </div>
              </li>
            )
          })}
        </ul>
      </div>
    )
  }
}
